class Mask {
    constructor(newSmallBox, newMask, newBigBox) {
        this.oSmallBox = newSmallBox;
        this.oMask = newMask;
        this.oBigBox = newBigBox;
    }

    onmouseover() {
        let that = this;
        //显示mask和bigBox
        this.oSmallBox.onmouseover = function() {
            that.oMask.style.display = "block";
            that.oBigBox.style.display = "block";
        }
    }

    onmouseout() {
        let that = this;
        //显示mask和bigBox
        this.oSmallBox.onmouseout = function() {
            that.oMask.style.display = "none";
            that.oBigBox.style.display = "none";
        }
    }

    onmousemove() {
        let that = this;
        this.oSmallBox.onmousemove = function(evt) {
            let e = evt || event;

            let left = e.pageX - this.offsetLeft - that.oMask.offsetWidth / 2;
            let top = e.pageY - this.offsetTop - that.oMask.offsetHeight / 2;

            if (left < 0) {
                left = 0;
            }

            let maxLeft = that.oSmallBox.offsetWidth - that.oMask.offsetWidth;

            if (left > maxLeft) {
                left = maxLeft;
            }

            if (top < 0) {
                top = 0;
            }

            let maxTop = that.oSmallBox.offsetHeight - that.oMask.offsetHeight;

            if (top > maxTop) {
                top = maxTop;
            }

            let x = that.oBigBox.offsetWidth * left / that.oMask.offsetWidth;
            let y = that.oBigBox.offsetHeight * top / that.oMask.offsetHeight;

            that.oBigBox.style.backgroundPositionX = -x + "px";
            that.oBigBox.style.backgroundPositionY = -y + "px";

            that.oMask.style.left = left + "px";
            that.oMask.style.top = top + "px";
        }
    }
}